<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/logo.png" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no" />
  <meta name="description" content="An online genshin loading demo, created by TEAM.x.y.z. team." />
  <title>冯俊杰个人主页</title>
  <style>
    *{ margin: 0px; padding: 0px;   -webkit-tap-highlight-color:transparent}
    body{ position:absolute; width: 100%; height: 100%; overflow: hidden;}
    .nav{ position:fixed; bottom: 20px; right: 20px;}

    .windowButton .button-29{ display: none;}
    .personalResume{pointer-events: none; padding-left: 0.5rem; position:fixed; width: 4.8rem; left: 50%; transform: translateX(-50%); ; font-size: .14rem; top: 1.50rem;  line-height: .32rem; opacity: 0;}
    .personalResume .title{ font-size: .45rem; text-align: center; padding: 0.3rem 0px;}

    .block{ padding-bottom: 0.4rem;}


    .button-29{  border-radius: 38px; overflow: hidden;  margin: 12px; height: 38px; font-size:12px; font-weight: bold; background-color: #fff; text-align: center; line-height: 38px; box-shadow: 0px 0px 3px rgba(0,0,0,0.2); background-image: url('Genshin/a.jpg'); background-size: 18px; background-repeat: no-repeat; padding:0 15px 0 30px; background-position: 10px 9px; user-select: none; cursor:pointer; opacity: 0; transition: all 0.2s; } 
    .button-29 img{ width:22px; height: 22px;}


    
    .footer{ position:fixed; bottom: 20px; left:20px; font-size: .12rem; color: #fff;  text-shadow: 0px 0px 3px rgba(0,0,0,1);  }
    .footer a{  color: #fff; text-decoration:underline}
    .footer a:hover{ color: #000; font-weight: bold;}

    .bg{ position:absolute; width: 100%;  background-repeat: no-repeat; height: 270px; bottom: 0px; background-image: url('image/aa.png'); pointer-events: none;}
    
    .show{animation:myfirst 1s forwards;}
    .show2{animation:myfirst2 1s forwards;  }

    .diannao{ display: none;  position:fixed; left: 50%; width: 8.10rem; height: 4.4rem; transform: translateX(-50%); top: 1.3rem; border: none;}
    @keyframes myfirst
    {
      from { opacity: 0;}
      to { opacity: 1;}
    }

    @keyframes myfirst2
    {
      from { opacity: 0; transform: translateX(-30px);}
      to { opacity: 1; transform: translateX(0px);}
    }

    .button:hover{ opacity: 0.8;}

    .photo{ position:fixed; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); z-index: 100; top: 0px; left: 0px; display:none;}
    .photo .main{left: 50%; top: 50%; position:absolute; transform: translate(-50%,-50%); color: #fff; text-align: center; font-size: .38rem;}
    .photo .main img{ max-width: 8rem; padding-bottom: 0.5rem;}
    .photo .exit{ font-size: .12rem; opacity: 0.5;}

    .yinyue{ width: .48rem; height: .48rem; background-image: url('./Genshin/yinyue.png'); background-size: contain; position:fixed; top:20px; right:20px; z-index: 2; cursor: pointer; }
    .yinyue audio{ display: none;}
    .yinyueP{animation: yinyueP 10s  linear  infinite; }
    @keyframes yinyueP
    {
      from {  transform: rotate(0deg);}
      to { transform: rotate(360deg)}
    }
  </style>
  <script type="module" crossorigin src="/assets/index-823b2052.js"></script>
  <link rel="stylesheet" href="/assets/index-442c940c.css">
</head>
<body>

  <div class="yinyue">
    <audio  loop></audio>
  </div>
  <div id="root"></div>

  <div></div>
  <div class="bg"></div>
  <div class="footer">
    <div id="fps" style="z-index:10000;font-weight:bold;"></div>
    <div>冯俊杰的个人主页</div>
    <div>拖动场景可旋转</div>
    <div>开发环境：谷歌浏览器</div>
    <div>场景可交互物品：记事本，电脑，照片墙</div>
    <div>Copyright ©2024 <a  href="https://beian.miit.gov.cn/">粤ICP备2025392407号-1</a></div>
  </div>

  <iframe class="diannao" src="a.html"></iframe>

  <div class="photo">
    <div class="main">
    <img src="image/P50928-115027.jpg" />
    <div class="title">先擦好过你诈骗</div>
    <div class="exit">随意点击关闭照片模式</div>
    </div>
  </div>
  <div class="personalResume">
    <div class="title">
      个人简历
    </div>
    <div class="block">
      1.熟悉Vue2,Vue3<br/>
      2.熟悉flutter、安卓原生开发<br/>
      3.熟悉three.js(canvas 3D框架),熟悉PixiJS（canvas 2D sprite渲染引擎框架）<br/>
      4.熟悉多端应用开发（nw.js开发电脑端,uni-app开发移动端APP,微信小程序，微信公众号）<br/>
      5.熟悉UE5/UE4(孪生城市技术)<br/>
      6.熟悉nodejs，熟练掌握socket.io使用技巧，有高并发高负载，高可用性系统设计开发经验<br/>
      7.熟悉php laravel 框架(了解easyWechat,YII2.0 等php框架)，拥有开发论坛，游戏官网后台，微信公众号经验<br/>
      8.熟悉JSES6,HTML5,canvas,CSS3，<br/>
      9.了解sass/elementUI/Bootstrap/WeUI/gulp/vite/webpack
    </div>

    <div class="block">
      喜欢挑战疑难杂症，讲求方法。同一个问题，会尝试采用多种方法解决。从而在前人的基础上提 炼出更加优越的解决方案.对工作非常认真，按时按质按量完成工作是我的宗旨.不单要达标还要超 越标准水平.自我学习能力较强.
    </div>
  </div>
  <div class="nav">
    <div class="main">
      <div class="button"><div class="button-29 button-1">个人简介</div></div>
      <div class="button"><div class="button-29 button-2">个人作品</div></div>
      <div class="button"><div class="button-29 button-3">照片墙</div></div>
    </div>
    <div class="windowButton">
      <div class="button"><div class="button-29">返回</div></div>
    </div>
  </div>

  <script>    
  var playIf = false;
    var windowdiyi = true;

  window.windowBOfang = function (){
    if(windowdiyi){
      windowdiyi = false;
      playIf = true;
    document.querySelector('.yinyue audio').src = 'Genshin/BGM.mp3'
    document.querySelector('.yinyue ').className = 'yinyue yinyueP';
    document.querySelector('.yinyue audio').play();
    }

  } 
  window.onpointerdown = windowBOfang;
  document.querySelector('.yinyue').onclick =  function (){
    playIf = !playIf;
    if(playIf){
      document.querySelector('.yinyue ').className = 'yinyue yinyueP';
      document.querySelector('.yinyue audio').play();
    }else{
      document.querySelector('.yinyue ').className = 'yinyue ';
      document.querySelector('.yinyue audio').pause();
    }
      
    }

    


    document.querySelector('.photo').onpointerdown  = function (){
      document.querySelector('.photo').className = 'photo'
      document.querySelector('.photo').style.display = 'none';
    };
  </script>
  
  <script>



function refreshRem() {
  let height = document.documentElement.clientHeight;
		var rem = (height/920*100)+ 'px'; 
    document.querySelector('html').style.fontSize = rem
	}
  refreshRem();
  window.addEventListener( 'resize', refreshRem);

var showFPS = (function(){ 
    var requestAnimationFrame =  
        window.requestAnimationFrame || 
        window.webkitRequestAnimationFrame || 
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame || 
        function(callback) { 
            window.setTimeout(callback, 1000/60); 
        }; 
    var e,pe,pid,fps,last,offset,step,appendFps; 
 
    fps = 0; 
    last = Date.now(); 
    step = function(){ 
        offset = Date.now() - last; 
        fps += 1; 
        if( offset >= 1000 ){ 
        last += offset; 
        appendFps(fps); 
        fps = 0; 
        } 
        requestAnimationFrame( step ); 
    }; 
    appendFps = function(fps){ 
        document.querySelector('#fps').innerHTML = fps+'FPS';
    };
    step();
})();
  </script>
</body>
</html>